<!-- 农业知识详情页组件 -->
<template>
  <!-- 详情页整体容器 -->
  <div class="knowledge-detail-container">
    <!-- 知识标题 -->
    <div class="title">{{updateInfo.title}}</div>
    <!-- 作者和日期信息栏 -->
    <div class="tips">
      <span>作者：</span>
      <span style="margin-right:20px;">{{updateInfo.ownName}}</span>
      <span>日期：</span>
      <span>{{updateInfo.updateTime | formatTimer}}</span> <!-- 使用过滤器格式化日期 -->
    </div>
    <!-- 媒体展示区域（视频或图片） -->
    <div class="detail-img">
      <!-- 视频类型展示（MP4格式） -->
      <video v-if="updateInfo.type==='mp4'||updateInfo.type==='MP4'" id="video" width="900" height="360" :src="$store.state.imgShowRoad + '/file/' + updateInfo.picPath" controls> </video>
      <!-- 图片类型展示 -->
      <img v-else style="width:600px;height:400px;" :src="$store.state.imgShowRoad + '/file/' + updateInfo.picPath" alt="" />
    </div>
    <!-- 知识内容详情（使用pre标签保留换行格式） -->
    <div class="detail-content">
      <pre>{{updateInfo.content}}</pre>
    </div>
    <!-- 评论输入框（双向绑定评论内容） -->
    <el-input type="textarea" v-model="content" :rows="5"></el-input>
    <!-- 添加评论按钮（右对齐布局） -->
    <div style="margin-top:20px;display: flex;flex-direction: row;justify-content: flex-end">
      <el-button type="success" @click="handleComment">添加评论</el-button>
    </div>
    <!-- 评论列表容器 -->
    <div class="comment-container">
      <!-- 评论数量提示 -->
      <div class="comment-num">评论共{{commentArray.length||0}}条</div>
      <!-- 遍历评论数组渲染每条评论 -->
      <div class="comment-item" v-for="(item,index) in commentArray" :key="index">
        <div>{{item.content}}</div> <!-- 评论内容 -->
        <div class="comment-tips">
          <div style="margin-right:40px;">评论人：<span class="color6">{{item.ownName}}</span></div> <!-- 评论人名称 -->
          <div>评论时间：<span class="color6">{{item.createTime|formatTimer2}}</span></div> <!-- 使用过滤器格式化评论时间 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入知识详情、评论查询、添加评论的API接口
import { selectKnowledgeById,selectComment,addComment } from "@/api/knowledge";

export default {
  data(){
    return{
      updateInfo:{}, // 存储当前知识详情数据
      content:'', // 绑定评论输入框内容
      commentArray:[] // 存储评论列表数据
    }
  },
  filters: {
    // 过滤器：格式化日期（仅年月日）
    formatTimer: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d + " ";
    },
    // 过滤器：格式化日期（年月日+时分）
    formatTimer2: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      return y + "-" + MM + "-" + d + " "+h+":"+m;
    }
  },
  methods:{
    // 获取知识详情数据（根据路由参数id查询）
    getData(){
      this.$store.commit("updateActiveIndex", "4"); // 更新导航选中状态
      selectKnowledgeById({
        knowledgeId: this.$route.params.id // 从路由参数获取知识id
      }).then((res) => {
        let tmp = res.data;
        const fileArr =  tmp.picPath.split('.') // 从文件路径提取扩展名（判断媒体类型）
        tmp.type = fileArr[fileArr.length - 1] // 补充文件类型字段
        this.updateInfo = tmp; // 更新知识详情数据
      })
      .catch((err) => {
        console.log(err);
      });
    },
    // 查询当前知识的评论列表
    getCommentData(){
      selectComment({
        knowledgeId: this.$route.params.id // 从路由参数获取知识id
      }).then(res => {
        this.commentArray = res.data // 更新评论列表
      }).catch(err=>{
        console.log(err)
      })
    },
    // 处理评论提交逻辑
    handleComment(){
      if(this.content===''){ // 校验评论内容是否为空
        this.$message.error('评论内容不能为空！')
        return
      }
      if(localStorage.getItem('token')){ // 校验用户是否登录（通过token判断）
        addComment({
          knowledgeId: this.$route.params.id, // 知识id
          content: this.content // 评论内容
        }).then(res=>{
          this.content='' // 清空输入框
          this.$message.success('评论成功！') // 提示成功
          this.getCommentData() // 重新加载评论列表
        }).catch(err=>{
          console.log(err)
        })
      }else{
        this.$message.error('请先登录') // 未登录提示
      }
    }
  },
  // 组件挂载时初始化数据（获取知识详情和评论）
  mounted(){
    this.getData()
    this.getCommentData()
  }
}
</script>

<style lang="less" scoped>
/* 知识详情页整体容器样式 */
.knowledge-detail-container{
  width: 1100px;
  background: #fff;
  min-height: 100%;
  padding: 10px 20px;
  margin: 10px auto 0;

  .title{
    font-size: 18px;
    text-align: center; // 标题居中显示
  }
  .tips{
    color: #27578d;
    display: flex;
    justify-content: flex-end; // 作者/日期右对齐
    height: 30px;
    align-items: center;
  }
  .detail-img{
    display: flex;
    justify-content: center; // 媒体内容居中展示
    margin-top: 50px;
    video{
      border: 1px solid #f2f2f2;
    }
    img{
      border-radius: 6px; // 图片圆角
    }
  }
  .detail-content{
    /* 内容区域样式（可根据需求扩展） */
  }
  .comment-container{
    clear: both;
    margin-top: 10px;
    .comment-num{
      font-weight: bold; // 评论数量加粗
    }
    .comment-item{
      border-bottom: 1px solid #f2f2f2; // 评论项底部边框分隔
      padding: 10px 20px;
      margin: 20px 0;
      word-break: break-all; // 长文本自动换行
      .comment-tips{
        display: flex;
        flex-direction: row;
        justify-content: flex-end; // 评论人/时间右对齐
        .color6{
          color: #666; // 次要文字颜色
        }
      }
    }
  }
}
</style>